@import "variables.scss";

* {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, Roboto, "Droid Sans", "Droid Sans Fallback", "Heiti SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}
html,body,#app{
  height:100%;
}
html,body{
  overflow:hidden;
}
#app{
  position:relative;
  overflow:hidden;
  .slide-right-enter-active,.slide-right-leave{
    transition:transform 0.4s ease;
    transform:translate3d(0,0,0);
  }
  .slide-right-leave-active{
    transition:transform 0.4s ease;
    transform:translate3d(50%,0,0);
  }
  .slide-right-enter{
    transition:transform 0.4s ease;
    transform:translate3d(-100%,0,0);
  }
  .slide-left-enter-active,.slide-left-leave{
    transition:transform 0.4s ease;
    transform:translate3d(0,0,0);
  }
  .slide-left-leave-active{
    transition:transform 0.4s ease;
    transform:translate3d(-50%,0,0);
  }
  .slide-left-enter{
    transition:transform 0.4s ease;
    transform:translate3d(100%,0,0);
  }
}
#app > *{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:$colorBrighter;
  box-shadow:$pageShadow;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}



a{
  color:$colorDark;
}
h6,p{
  @include noSpace;
}
ul{
  @include noSpace;
  list-style-type:none;
  li{
    @include noSpace;
  }
}
li{
  list-style-type: none;
}
.background-light{
  background-color:$backgroudLight;
}
  .mu-appbar{
      background-color:$colorMain;
      color:$colorDark;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
      height:45px;
      .mu-appbar-title{
        line-height:45px;
      }
      .mu-flat-button{
        color:$colorDark!important;
      }
  }
.mu-popup-bottom{
	width:100%;
}
.mu-item{
  padding:1rem;
}
.mu-raised-button-full{
  display:block;
  width:90%;
  margin:$spaceBig auto;
  height:$spaceBig*0.7;
  line-height:$spaceBig*0.7;
}
.mu-raised-button-primary {
    background-color:$colorPrimary;
}
      .mu-text-field{
        padding:0 $spaceSmall;
        &.has-label .mu-text-field-label.float{
          color:$colorDark;
        }
        &.focus-state{
          color:$colorSecondary;
        }
        .mu-text-field-help{
          padding:0 $spaceSmall;
        }
        .mu-text-field-focus-line{
          background-color:$colorSecondary;
        }

      }

      .mu-raised-button-secondary{
        background-color:$colorSecondary;
      }
.mu-switch input[type="checkbox"]:checked + .mu-switch-wrapper .mu-switch-track{
  background-color:lighten($colorSecondary,30%);
}
.mu-switch input[type="checkbox"]:checked + .mu-switch-wrapper .mu-switch-thumb{
  background-color:$colorSecondary;
  color:$colorSecondary;
}
.mu-float-button{
  // background-color:#fff;
  // color:$colorSecondary;
  background-color:$colorSecondary;
  .mu-icon{
    width:26px!important;
    height:26px!important;
    font-size:26px!important;
  }
}

.mu-snackbar.center{
  display:block;
  padding:0.5rem;
  right:0;
  top:0;
  margin:auto;
  height:80px;
  width:50%;
  background:rgba(0,0,0,0.5);
  border-radius:5px;
  .mu-snackbar-message{
    display:block;
    text-align:center;
    padding-top:10px;
    // text-align:justify;
    // word-break:break-word;
    font-size:12px;
  }
  .mu-flat-button{
    position:absolute;
    width:100%;
    left:0;
    bottom:0;
  }
}
.mu-time-display,.mu-clock-number.selected,.mu-clock-pointer{
  background:$colorSecondary;
}
.mu-clock-pointer-mark{
  border-color:$colorSecondary;
}
.BMap_stdMpCtrl{
  right:$spaceMedium!important;
  bottom:$spaceMedium!important;
}
.custom-icon{
  display:inline-block;
  vertical-align:middle;
  font-size: 24px;
  width: 24px;
  height: 24px;
  margin-right:5px;
}
.anchorBL{
  display:none!important;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}

@-webkit-keyframes rotate{
  0%{
    -webkit-transform:translate3d(0,0,0) rotate(0);
  }
  100%{
    -webkit-transform:translate3d(0,0,0) rotate(360deg);
  }
}
@keyframes rotate{
  0%{
    transform:translate3d(0,0,0) rotate(0);
  }
  100%{
    transform:translate3d(0,0,0) rotate(360deg);
  }
}

